<template>
	<view class="content" :class="[courseType == 0 ? 'ccolor' : '']">
		<view class="area_course">
			<view class="area">
				<image src="../../../static/appointment/position.png" mode="widthFix" />
				<!-- <picker-view indicator-style="height: 40px;" class="mpvue-picker-view" :value="courseAddress" @change="addressChange" v-if="courseAddressArray.length > 0">
				    <block>
				        <picker-view-column>
				            <view class="picker-item" v-for="(item,index) in courseAddressArray" :key="index">{{item.shopName}}</view>
				        </picker-view-column>
				    </block>
				</picker-view> -->
				<view style="height: 19px; overflow: hidden;">
					<picker @change="addressChange" :value="shopIndex" :range="courseAddressArray" range-key="shopName" disabled="true">
						{{courseAddressArray[shopIndex]?courseAddressArray[shopIndex].shopName:''}}
						<!-- <view style="opacity:0" v-for="(item,index) in courseAddressArray" :key="index">{{item.shopName}}</view> -->
					</picker>
				</view>
				<!-- <image class="unfold" src="../../../unfold.png" mode="widthFix" /> -->
			</view>
			<view class="course">
				<view @click="dayOrWeek(0)" :class="[courseType == 0 ? 'active' : '']" class="day">
					<image class="show" src="../../../static/appointment/day_active.png" mode="widthFix" />

					<image class="hide" src="../../../static/appointment/day.png" mode="widthFix" />
					<view class="text">日课表</view>
				</view>
				<view @click="dayOrWeek(1)" :class="[courseType == 1 ? 'active' : '']" class="week ">
					<image class="show" src="../../../static/appointment/week_active.png" mode="widthFix" />

					<image class="hide" src="../../../static/appointment/week.png" mode="widthFix" />
					<view class="text">周课表</view>
				</view>
			</view>
		</view>
		<view v-if="courseType == 0">
			<view class="day_module">
				<view class="titile-month">
					<view>{{courseDateArray[0].getMonth() + 1}}月</view>
					<image src="../../../static/appointment/month_two.png" mode="widthFix" />
				</view>
				<view class="data">
					<view class="item" @click="getdaytable(courseDateArray[0])" :class="[courseDate == courseDateArray[0] ? 'active' : '']">
						<view class="name">今天</view>
						<view class="num">{{courseDateArray[0].getDate()}}</view>
						<view class="id">{{courseCount}}</view>
					</view>
					<view class="item" @click="getdaytable(courseDateArray[1])" :class="[courseDate == courseDateArray[1] ? 'active' : '']" >
						<view class="name">明天</view>
						<view class="num">{{courseDateArray[1].getDate()}}</view>
						<view class="id">{{courseCount}}</view>
					</view>
					<view class="item" @click="getdaytable(courseDateArray[2])" :class="[courseDate == courseDateArray[2] ? 'active' : '']">
						<view class="name">{{getWeekZh(courseDateArray[2].getDay())}}</view>
						<view class="num">{{courseDateArray[2].getDate()}}</view>
						<view class="id">{{courseCount}}</view>
					</view>
					<view class="item" @click="getdaytable(courseDateArray[3])" :class="[courseDate == courseDateArray[3] ? 'active' : '']">
						<view class="name">{{getWeekZh(courseDateArray[3].getDay())}}</view>
						<view class="num">{{courseDateArray[3].getDate()}}</view>
						<view class="id">{{courseCount}}</view>
					</view>
					<view class="item" @click="getdaytable(courseDateArray[4])" :class="[courseDate == courseDateArray[4] ? 'active' : '']">
						<view class="name">{{getWeekZh(courseDateArray[4].getDay())}}</view>
						<view class="num">{{courseDateArray[4].getDate()}}</view>
						<view class="id">{{courseCount}}</view>
					</view>
					<view class="item" @click="getdaytable(courseDateArray[5])" :class="[courseDate == courseDateArray[5] ? 'active' : '']">
						<view class="name">{{getWeekZh(courseDateArray[5].getDay())}}</view>
						<view class="num">{{courseDateArray[5].getDate()}}</view>
						<view class="id">{{courseCount}}</view>
					</view>
					<view class="item" @click="getdaytable(courseDateArray[6])" :class="[courseDate == courseDateArray[6] ? 'active' : '']">
						<view class="name">{{getWeekZh(courseDateArray[6].getDay())}}</view>
						<view class="num">{{courseDateArray[6].getDate()}}</view>
						<view class="id">{{courseCount}}</view>
					</view>
				</view>
			</view>
			<view class="data-teacher-list" v-if="courseType == 0">
				<view class="item" v-for="item in dayCourseArry">
					<view class="user">
						<image src="../../../static/personal/avatar.png" mode="widthFix" />
						<view class="info">
							<view class="course">{{item.courseName}}</view>
							<view class="name">教练 {{item.teacherName}}</view>
						</view>
					</view>
					<view class="date" v-for="course in item.timesList">
						<view class="time">
							{{course.startTime > '12:00'? '下午':'上午'}} {{course.startTime}}-{{course.endTime}}
						</view>
						<view>
							{{course.remark}}
						</view>
						<view v-show="course.status === null" class="btn" @click="handleCourse(course.courseId,course.id,courseDate.getFullYear()+'-'+('0'+(courseDate.getMonth()+1)).slice(-2)+'-'+('0'+courseDate.getDate()).slice(-2)+' '+course.courseWeekZh)">
							<image src="../../../static/appointment/date.png" mode="widthFix" />
							约课
						</view>
						<view v-show="course.status !== null" class="btn active">
							<image src="../../../static/appointment/date.png" mode="widthFix" />
							已约
						</view>
					</view>
				</view>
				<view style="height: 100rpx;">
					
				</view>
				<hint ref="hintc"></hint>
			</view>
		</view>

		<view v-if="courseType == 1">
			<view class="week_btn">
				<button :style="buttonStyle">上一周</button>
				<view>{{courseWeekDateArray[0].getMonth() + 1}}-{{courseWeekDateArray[0].getDate()}}至{{courseWeekDateArray[6].getMonth() + 1}}-{{courseWeekDateArray[6].getDate()}}</view>
				<button :style="buttonStyle">下一周</button>
			</view>
			<scroll-view class="scroll-view" scroll-x>
				<view class="data-title">
					<view class="one">时间</view>
					<view class="item">
						<view class="date">{{courseWeekDateArray[0].getMonth() + 1}}月{{courseWeekDateArray[0].getDate()}}日</view>
						<view class="name">{{getWeekZh(courseDateArray[0].getDay())}}</view>
					</view>
					<view class="item">
						<view class="date">{{courseWeekDateArray[1].getMonth() + 1}}月{{courseWeekDateArray[1].getDate()}}日</view>
						<view class="name">{{getWeekZh(courseDateArray[1].getDay())}}</view>
					</view>
					<view class="item">
						<view class="date">{{courseWeekDateArray[2].getMonth() + 1}}月{{courseWeekDateArray[2].getDate()}}日</view>
						<view class="name">{{getWeekZh(courseDateArray[2].getDay())}}</view>
					</view>
					<view class="item">
						<view class="date">{{courseWeekDateArray[3].getMonth() + 1}}月{{courseWeekDateArray[3].getDate()}}日</view>
						<view class="name">{{getWeekZh(courseDateArray[3].getDay())}}</view>
					</view>
					<view class="item">
						<view class="date">{{courseWeekDateArray[4].getMonth() + 1}}月{{courseWeekDateArray[4].getDate()}}日</view>
						<view class="name">{{getWeekZh(courseDateArray[4].getDay())}}</view>
					</view>
					<view class="item">
						<view class="date">{{courseWeekDateArray[5].getMonth() + 1}}月{{courseWeekDateArray[5].getDate()}}日</view>
						<view class="name">{{getWeekZh(courseDateArray[5].getDay())}}</view>
					</view>
					<view class="item">
						<view class="date">{{courseWeekDateArray[6].getMonth() + 1}}月{{courseWeekDateArray[6].getDate()}}日</view>
						<view class="name">{{getWeekZh(courseDateArray[6].getDay())}}</view>
					</view>
				</view>
				<view class="data-list" v-for="item in weekCourseArry">
					<view class="one" :style="{ 'line-height': item.height * 229 + 'rpx' }">{{item.time}}</view>
					<view class="item1" v-for="courses in item.coursess">
						<view class="c active" v-for="course in courses">
							<view class="date">{{course.startTime}}-{{course.endTime}}</view>
							<view class="name">{{course.teacherName}}</view>
							<view v-show="course.limitsNum <= course.scdCount" class="text">暂时不可预约</view>
							<view v-show="course.limitsNum > course.scdCount" class="button">预约</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<popup :close="isPopup">
			<view class="popup_c">
				<image src="../../../static/appointment/bg.png" mode="widthFix" />
				<image @click="close" class="close" src="../../../static/appointment/close.png" mode="widthFix" />
				<view class="c">
					<view class="title">为孩子选择约课</view>
					<image src="../../../static/appointment/icon_title.png" mode="widthFix" />
					<view class="data">
						<view class="item">李依依</view>
						<view class="item active">张少骞</view>
						<view class="item">李迪迪</view>
					</view>
					<view class="btn" @click="handleSign">立即约课</view>
				</view>
			</view>
		</popup>
	</view>
</template>
<script>
	import popup from '../../../components/popup/popup.vue';
	export default {
		components: {
			popup
		},
		data() {
			return {
				courseType: 0,
				buttonStyle: 'background-color: #C0C0C0',
				dayCourseArry: [],
				courseCount: 0,
				courseDate: '',
				width: 0,
				shopId: 0,
				courseAddress: '',
				courseAddressArray: [],
				courseWeekDateArray: [],
				courseDateArray: [],
				weekCourseArry: [],
				isPopup: false,
				student: [],
				shopIndex: 0
			};
		},
		mounted() {
			this.$sys.getBoundingClientRect('.data-title').then(data => {
				//this.width = data.width;
			});
			//this.$refs.hintc.setStatus('loading');
			this.initializeDate()
			this.getShopList()
		},
		methods: {
			addressChange: function(e) {
				//console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.shopIndex = e.detail.value
				this.shopId = this.courseAddressArray[e.detail.value].id
				this.courseAddress = this.courseAddressArray[e.detail.value].shopName
				if(this.courseType === 0){
					this.getSchooldayTable()
				}else{
					this.getSchoolWeekTable()
				}
			},
			dayOrWeek(num) {
				if(num === 0){
					this.getSchooldayTable()
				}else{
					this.initializeWeekDate(new Date())
				}
				this.courseType = num
			},
			getdaytable(date) {
				this.courseDate = date
				this.getSchooldayTable()
			},
			
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1]
								.replace(/\+/g, '%20')) || null
			},
			
			getShopList() {
				let bid = this.getUrlCode('bid');
				if(!bid){
					uni.showToast({
						title: "非法链接！",
						duration: 2000
					});	 
					return
				}
				const parent = uni.getStorageSync('parent');
				if(parent && !parent.shopId){
					uni.showToast({
						title: "未分配校区！",
						duration: 3500
					});	 
					uni.navigateTo({
						url: '/pages/my/login/login?bid='+this.getUrlCode('bid')
					}) 
					return
				}
				let that = this
				uni.request({
					url: this.websiteUrl + 'app/appointmentcurriculum/allshoplist',
					method: 'POST',
					data: {
						businessId: this.getUrlCode('bid')
						//parentId: uni.getStorage('userId')
					},
					success: function(res) {
						if (res.data.code == 0) {
							that.courseAddressArray = res.data.shops
							//设置默认校区
							if(parent && parent.shopId){
								//登陆取报名的校区
								for (var i = 0; i < that.courseAddressArray.length; i++) {
									if (that.courseAddressArray[i].id == parent.shopId) {
										that.courseAddress = that.courseAddressArray[i].shopName
										that.shopId = that.courseAddressArray[i].id
										that.shopIndex = i
										break;
									}
								}
							}else{
								//未登录默认第一个校区
								that.courseAddress = that.courseAddressArray[0].shopName
								that.shopId = that.courseAddressArray[0].id
							}
							//查询课程时间
							that.getSchooldayTable()
						} else {
							that.$sys.showToast({
								title: res.data.msg
							});
						}
					}
				});

				// 中断请求任务
				//requestTask.abort();
			},
			getSchooldayTable() {
				let that = this;
				const parent = uni.getStorageSync('parent');
				uni.request({
					url: this.websiteUrl + 'app/appointmentcurriculum/dayCourseDate',
					method: 'POST',
					data: {
						courseDate: this.courseDate.getFullYear() + '-' + 
						((this.courseDate.getMonth() + 1) < 10 ?('0' + (this.courseDate.getMonth() + 1)) : (this.courseDate.getMonth() + 1))
						 + '-' + (this.courseDate.getDate() < 10 ? '0' + this.courseDate.getDate() : this.courseDate.getDate()),
						appointmentDate: this.getYMD(this.courseDate, 7),
						courseWeek: this.getWeekEn(this.courseDate.getDay()),
						shopId: this.shopId,
						parentId: parent.id
						//parentId: uni.getStorage('userId')
					},
					success: function(res) {
						/* if (res.data.code == 0) {
							that.dayCourseArry = that.formtDayCourseArry(res.data.studentDayCourseDates)
							that.courseCount = res.data.studentDayCourseDates.length
						} else {
							that.$sys.showToast({
								title: res.data.msg
							});
						} */
						if (res.data.code == 0) {
							that.dayCourseArry = res.data.studentDayCourseDates
							that.courseCount = res.data.studentDayCourseDates.length
						} else {
							that.$sys.showToast({
								title: res.data.msg
							});
						}
					}
				});

				// 中断请求任务
				//requestTask.abort();
			},
			getSchoolWeekTable() {
				let that = this
				uni.request({
					url: this.websiteUrl + 'app/appointmentcurriculum/schoolweektimetable',
					method: 'POST',
					data: {
						/* courseDate: this.courseDate.getFullYear() + '-' + (this.courseDate.getMonth() + 1) + '-' +
							this.courseDate.getDate(), */
						appointmentDates: [this.getYMD(this.courseDate, 7), this.getYMD(this.courseDate, 6), this.getYMD(this.courseDate, 5), 
						this.getYMD(this.courseDate, 4), this.getYMD(this.courseDate, 3), this.getYMD(this.courseDate, 2), this.getYMD(this.courseDate, 1)],
						courseWeekDates: [this.getYMD(this.courseWeekDateArray[0], 0), this.getYMD(this.courseWeekDateArray[1], 0), this.getYMD(this.courseWeekDateArray[2], 0), 
						this.getYMD(this.courseWeekDateArray[3], 0), this.getYMD(this.courseWeekDateArray[4], 0), this.getYMD(this.courseWeekDateArray[5], 0), this.getYMD(this.courseWeekDateArray[6], 0)],
						courseWeeks: this.getWeekEns(this.courseDate.getDay()),
						shopId: this.shopId,
						parentId: 1
						//parentId: uni.getStorage('userId')
					},
					success: function(res) {
						if (res.data.code == 0) {
							that.weekCourseArry = that.formtWeekCourseArry(res.data.weekCurriculums)
						} else {
							that.$sys.showToast({
								title: res.data.msg
							});
						}
					}
				});
			
				// 中断请求任务
				//requestTask.abort();
			},
			formtDayCourseArry(arry) {
				let dayCourseArry = new Array()
				for(let i = 0; i < arry.length; i++){
					//console.log('11111111111')
					let dayCourse = {'courseId': arry[i].courseId,'courseName': arry[i].courseName,'teacherName': arry[i].teacherName, 'courseArry': [arry[i]]}
					let flag = 1
					for(let j = 0; j < dayCourseArry.length; j++){
						if(dayCourseArry[j].courseId === dayCourse.courseId){
							dayCourseArry[j].courseArry.push(arry[i])
							flag = 0
							//console.log('00000000000')
							break
						}
					}
					if(flag === 1){
						dayCourseArry.push(dayCourse)
						//console.log('iiiiiiiiiiiiiiii')
					}
				}
				//console.log(dayCourseArry)
				return dayCourseArry
			},
			formtWeekCourseArry(weekCurriculums){
				let weekCurriculum7 = new Array()
				
				//let weekCurriculum = {time:'',coursess:[]}
				let times = new Array()
				
				for(let i=0; i < 7; i++){
					let weekCurriculum1 = new Array() 
					let weekCurriculum = weekCurriculums[i]
					for(let j in weekCurriculum){
						times.push(weekCurriculum[j].startTime)
						if(weekCurriculum1.length == 0){
							weekCurriculum1.push({time:weekCurriculum[j].startTime,coursess:[weekCurriculum[j]]})
						}else{
							let flag = 0
							for(let k in weekCurriculum1){
								if(weekCurriculum1[k].time === weekCurriculum[j].startTime){
									weekCurriculum1[k].coursess.push(weekCurriculum[j])
									flag = 1
									break
								}
							}
							if(flag === 0){
								weekCurriculum1.push({time:weekCurriculum[j].startTime,coursess:[weekCurriculum[j]]})
							}
						}
					}
					weekCurriculum7.push(weekCurriculum1)
				}
				times = this.repeatRemove(times).sort()
				console.log(weekCurriculum7)
				let timeCourses = new Array()
				for(let i in times){
					let courses = {time:times[i], height:1, coursess:[]}
					for(let j in weekCurriculum7){
						let arrayj = weekCurriculum7[j]
						let flag = 0
						for(let k in arrayj){
							if(arrayj[k].time === times[i]){
								courses.coursess.push(arrayj[k].coursess)
								if(arrayj[k].coursess.length > courses.height){
									courses.height = arrayj[k].coursess.length
								}
								flag = 1
							}
						}
						if(flag === 0){
							courses.coursess.push(new Array())
						}
					}
					timeCourses.push(courses)
				}
				return timeCourses
			},
			/* 数组去重 */
			repeatRemove(array) {
				var n = {},r=[]; //n为hash表，r为临时数组
				for(var i = 0; i < array.length; i++) //遍历当前数组
				{
					if (!n[array[i]]) //如果hash表中没有当前项
					{
						n[array[i]] = true; //存入hash表
						r.push(array[i]); //把当前数组的当前项push到临时数组里面
					}
				}
				return r;
			},
			initializeDate() {
				let date = new Date()
				this.courseDateArray = new Array(7)
				this.courseDateArray[0] = date
				for (let i = 1; i < 7; i++) {
					let datei = new Date()
					datei.setDate(date.getDate() + i)
					this.courseDateArray[i] = datei
				}
				//console.log(this.courseDateArray)
				this.courseDate = this.courseDateArray[0]
			},
			initializeWeekDate(date) {
				this.courseWeekDateArray = new Array(7)
				this.courseWeekDateArray[0] = date
				for (let i = 1; i < 7; i++) {
					let datei = new Date()
					datei.setDate(date.getDate() + i)
					this.courseWeekDateArray[i] = datei
				}
				console.log(this.courseWeekDateArray)
				this.getSchoolWeekTable()
				//this.courseDate = this.courseWeekDateArray[0]
			},
			getYMD(date, num) {
				let appDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), '00', '00', '00')
				appDate.setDate(appDate.getDate() - num)
				return appDate.getFullYear() + '-' + ((appDate.getMonth() + 1) < 10?('0' + (appDate.getMonth() + 1)) : (appDate.getMonth() + 1)) + '-' + appDate.getDate()
			},
			getWeekZh(days) {
				switch (days) {
					case 1:
						days = '周一'
						break
					case 2:
						days = '周二'
						break
					case 3:
						days = '周三'
						break
					case 4:
						days = '周四'
						break
					case 5:
						days = '周五'
						break
					case 6:
						days = '周六'
						break
					case 0:
						days = '周日'
						break
				}
				return days
			},
			getWeekEn(days) {
				switch (days) {
					case 1:
						days = 'Mon'
						break
					case 2:
						days = 'Tue'
						break
					case 3:
						days = 'Wed'
						break
					case 4:
						days = 'Thu'
						break
					case 5:
						days = 'Fri'
						break
					case 6:
						days = 'Sat'
						break
					case 0:
						days = 'Sun'
						break
				}
				return days
			},
			getWeekEns(days) {
				switch (days) {
					case 1:
						return ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
					case 2:
						return ['Tue','Wed','Thu','Fri','Sat','Sun','Mon']
					case 3:
						return ['Wed','Thu','Fri','Sat','Sun','Mon','Tue']
					case 4:
						return ['Thu','Fri','Sat','Sun','Mon','Tue','Wed']
					case 5:
						return ['Fri','Sat','Sun','Mon','Tue','Wed','Thu']
					case 6:
						return ['Sat','Sun','Mon','Tue','Wed','Thu','Fri']
					case 0:
						return ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
				}
			},
			handleCourse(courseId,courseTimeId,courseTimeDesc) {
				let that = this
				let parent = uni.getStorageSync('parent');
				if(!parent){
					uni.showToast({
						title: '请先登陆',
						duration: 3500
					});
					uni.navigateTo({
						url: '/pages/my/login/login?bid='+this.getUrlCode('bid')
					}) 
					return;
				}
				//获取学生列表
				uni.request({
					url: this.websiteUrl + 'app/chooseStudent',
					method: 'GET',
					data: {
						parentId: parent.id
					},
					success: function(res) {
						if (res.data.code == 0) {
							that.student = res.data.studentEntityList;
							//弹出选择框
							if(!that.student){
								that.$sys.showToast({
									title: '请联系机构添加孩子信息！'
								});
							}else{
								if(that.student.length>1){
									//多个孩子必须选择一个
									that.isPopup = true;
								}else if(that.student.length==1){
									let studentId = that.student[0].id
									//只有一个孩子，直接触发预约
									that.appointBtn(studentId,courseId,courseTimeId,courseTimeDesc);
								}
							}
						} else {
							
						}
					}
				});
			},
			
			//立即预约
			appointBtn(studentId,courseId,courseTimeId,courseTimeDesc) {
				let that = this
				uni.request({
					url: this.websiteUrl + '/app/appoint',
					method: 'get',
					data: {
						studentId: studentId,
						courseId: courseId,
						courseTimeId: courseTimeId,
						courseTimeDesc: courseTimeDesc
					},
					success: function(res) {
						if (res.data.code != 0) {
							uni.showToast({
								icon: 'none',
								title: res.data.msg,
								duration: 3500
							});
						}else{
							uni.showToast({
								icon: 'none',
								title: '预约成功',
								duration: 3500
							});
							that.getSchooldayTable();
						}
					},
				});
			},
			
			handleCancel() {
				this.$sys.showToast({
					title: '约课失败'
				});
			},
			
			handleSign() {
				this.$sys.showToast({
					icon: 'success',
					title: '约课成功'
				});
				this.close()
			},
			close() {
				this.isPopup = false
			}
		}
	};
</script>
<style lang="scss">
	.ccolor {
		min-height: 100%;
		background: #f8f9f9;
	}

	.popup_c {
		position: relative;

		.close {
			width: 32rpx;
			position: absolute;
			right: $base-interval;
			top: $base-interval;
			z-index: 5;
		}

		.c {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0px;
			top: 0px;
			z-index: 4;

			image {
				position: absolute;
				top: 100rpx;
				width: 70rpx;
				left: 50%;
				margin-left: -35rpx;
			}

			.title {
				text-align: center;
				font-size: 36rpx;
				font-weight: 600;
				padding: 10 + $base-interval 0px 2 * $lg-interval;
			}

			.data {
				@extend .flex-space-between-center;
				width: 85%;
				margin: auto;

				.item {
					width: 180rpx;
					line-height: 80rpx;
					text-align: center;
					background: #ffffff;
					border-radius: 40rpx;
					margin-bottom: $lg-interval;
					border: 1rpx solid #e8e8e8;
				}

				.active {
					color: $text-color-white;
					background: #ff9f59;
				}
			}

			.btn {
				@extend .global-button;
				width: 50%;
				margin: 10rpx auto 0px;
			}
		}
	}

	.titile-month {
		position: relative;

		image {
			width: 220rpx;
			position: absolute;
			left: 0px;
			top: 0px;
			z-index: 1;
		}

		view {
			color: $text-color-nine;
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 15rpx;
			position: relative;
			z-index: 3;
			padding-top: -5 + $sm-interval;
		}
	}

	.day_module {
		background: #ffffff;
		box-shadow: 0px 0px 12rpx 4rpx rgba(186, 196, 207, 0.22);
		border-radius: $border-radius-lg;
		padding: $base-interval $sm-interval;

		.data {
			@extend .flex-space-between-center;

			.item {
				width: 13.5%;
				height: 150rpx;
				background: #f2f3f5;
				border-radius: 4rpx;
				text-align: center;

				.name {
					padding-top: 10rpx;
					padding-bottom: 8rpx;
					font-size: $font-size-sm;
					color: $text-color-three;
				}

				.num {
					font-size: 40rpx;
					color: $text-color-black;
				}

				.id {
					margin: 10rpx auto 0px;
					text-align: center;
					width: 36rpx;
					line-height: 25rpx;
					background: #ffffff;
					color: $main-color;
					font-size: $font-size-min;
					border-radius: 2rpx;
					display: none;
				}
			}

			.active {
				background-color: $main-color;

				.name,
				.num {
					color: $text-color-white;
				}

				.id {
					display: block;
				}

				position: relative;

				&:after {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					left: 50%;
					border-right: 12rpx solid transparent;
					border-left: 12rpx solid transparent;
					border-bottom: 16rpx solid #f8f9f9;
					margin-left: -8rpx;
					bottom: -1 * $base-interval;
				}
			}
		}
	}

	.data-teacher-list {
		.item {
			background-color: $bg-color-white;
			margin-top: $sm-interval;
			padding: $base-interval;

			.user {
				@extend .flex-space-between-center;
				justify-content: flex-start;

				image {
					width: 110rpx;
				}

				.info {
					margin-left: $sm-interval;

					.name {
						color: $text-color-three;
						margin-top: 10rpx;
					}

					.course {
						color: $text-color-three;
						font-weight: 600;
						font-size: $font-size-lg;
					}
				}
			}

			.date {
				@extend .flex-space-between-center;
				margin-top: $base-interval;
				color: $text-color-three;

				.btn {
					width: 120rpx;
					height: 50rpx;
					background: #20c6ba;
					border-radius: 4rpx;
					color: $text-color-white;
					@extend .flex-space-between-center;
					justify-content: center;
					font-size: $font-size-sm;

					image {
						margin-right: 15rpx;
						width: 28rpx;
					}
				}

				.active {
					background-color: #ff9f59;
				}
			}
		}
	}

	.area_course {
		@extend .flex-space-between-center;
		margin: 0px -1 * $base-interval;
		padding: $base-interval;
		background: #ffffff;
		border-bottom: $sm-interval solid #f8f9f9;

		.area {
			@extend .flex-space-between-center;
			font-size: $font-size-lg;
			font-weight: 500;
			color: $text-color-main;

			image {
				width: 40rpx;
				margin-right: 10rpx;
			}

			.unfold {
				width: 30rpx;
				margin-left: 10rpx;
				margin-top: 10rpx;
			}
		}

		.course {
			@extend .flex-space-between-center;

			.day,
			.week {
				position: relative;

				image {
					width: 92rpx;
				}

				.show {
					display: none;
				}

				.text {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0px;
					top: 0px;
					@extend .flex-space-between-center;
					font-size: $font-size-sm;
					text-indent: 4rpx;
					color: $text-color-three;
				}
			}

			.week {
				margin-left: -10rpx;

				.text {
					text-indent: 15rpx;
				}
			}

			.active {
				.text {
					color: $text-color-white;
				}

				.hide {
					display: none;
				}

				.show {
					display: block;
				}
			}
		}
	}

	.week_btn {
		@extend .flex-space-between-center;
		justify-content: center;
		padding-top: $base-interval;

		button {
			width: 120rpx;
			line-height: 56rpx;
			background: #ff9f59;
			border-radius: 4rpx;
			display: inline-block;
			padding: 0px;
			font-size: $font-size-sm;
			color: $text-color-white;
		}

		view {
			font-size: $font-size-lg;
			font-weight: 500;
			font-family: PingFangSC-Medium, PingFang SC;
		}
	}

	.scroll-view {
		white-space: nowrap;
		margin: 0px -1 * $base-interval;
	}

	.data-title {}

	.data-title,
	.data-list {
		font-size: 600;

		padding: $base-interval 0px 0px;

		.one {
			width: 95rpx;
			display: inline-block;
			font-size: $font-size-sm;
			font-weight: 600;
			line-height: 80rpx;
			vertical-align: top;
			padding-bottom: $base-interval;
			text-align: center;
		}

		.item {
			display: inline-block;
			width: 192rpx;
			text-align: center;
			height: 80rpx;
			padding-bottom: $base-interval;

			.date {
				font-size: $font-size-sm;
			}

			.name {
				font-weight: 600;
				margin-top: 10rpx;
				font-size: $font-size-base;
			}
		}

		.item1 {
			display: inline-block;
			width: 170rpx;
			text-align: center;

			padding: 15rpx 15rpx 0px;

			.c {
				color: $text-color-nine;
				padding-bottom: $base-interval;
				background: #f2f3f5;
				border-radius: 6rpx;
				font-size: $font-size-sm;
				margin-bottom: 30rpx;
				vertical-align: top;
				position: relative;

				&:after {
					content: '';
					position: absolute;
					width: 200rpx;
					left: -15rpx;
					bottom: -17rpx;
					border-bottom: 1rpx solid #e8e8e8;
				}

				&:last-child {
					margin-bottom: 15rpx;
				}

				&:last-child::after {
					content: '';
					position: absolute;
					width: 199rpx;
					height: 10rpx;
					left: -15rpx;
					bottom: -18rpx;
					z-index: 10;
					background-color: #ffffff;
					border-bottom: 1rpx solid #e8e8e8;
				}

				.date {
					padding-top: $base-interval;
				}

				.name {
					margin-top: 5rpx;
					margin-bottom: $lg-interval;
				}
			}

			.hide {
				opacity: 0;
			}
		}
	}

	.data-list {
		padding: 0px;
		white-space: nowrap;

		.one {
			float: left;
			border-right: 1rpx solid #e8e8e8;
			border-top: 1rpx solid #e8e8e8;

			padding-bottom: 0px;
			@extend .flex-space-between-center;
			justify-content: center;

			&:last-child {
				border-bottom: 1rpx solid #e8e8e8;
			}
		}

		.item1 {
			vertical-align: top;
			border-top: 1rpx solid #e8e8e8;
			border-right: 1rpx solid #e8e8e8;
			border-bottom: 1rpx solid #e8e8e8;

			.active {
				color: $text-color-white;
				background: #20c6ba;

				.name {
					margin-bottom: -11 + $lg-interval;
				}

				.button {
					width: 100rpx;
					line-height: 44rpx;
					color: #20c6ba;
					border-radius: 8rpx;
					margin: auto;
					background: #ffffff;
				}
			}
		}
	}

	.data-list:last-child {
		.one {
			border-bottom: 1rpx solid #e8e8e8;
		}
	}
</style>
